<template>
	<view class="tarnser">
		<navCom :navName="brandName" @previous="previous"></navCom>
		<view class="search-bar">
			<view class="input">
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/alVjZYOMWg_seach_icon.png" class="i-icon my-mglr-15"></image>
				<input class="device" v-model.lazy="deviceNo" type="text" placeholder-class="txt_inp" placeholder="请输入或扫描机身SN码" />
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/XINKEyXeOq_scanning_icon.png" class="scang_img my-mgr-15" mode=""></image>
			</view>
			<swiper class="tabs my-mgt-15">
				<swiper-item v-for="(item, index) in tab" :key="index" @click="onTab(index)" class="swiper-item">
					<view class="swiper-box">{{ item }}</view>
					<view :class="select === index ? 'active_bor' : ''"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="selection my-mgt-15">
			<view class="select-all">
				<checkbox-group class="sel" @change="allCheckBox">
					<checkbox :checked="checkAll" class="check" color="#F05329" />
				</checkbox-group>
				全选
			</view>
			<scroll-view scroll-y="true" class="scroll" lower-threshold="100" @scrolltolower="getList">
				<template v-if="dev.length > 0">
					<view class="scroll_box my-flex-row-align-c my-pd-10" v-for="(item,index) in dev" :key="index">
						<view class="trs" >
							<checkbox disabled color="#F05329" class="trs_check" v-if="item.activation" />
							<checkbox :checked="item.check" color="#F05329" class="trs_check" @click="changeInfo(index)" v-else/>
						</view>
						<view style="width: 250rpx;" class="main-td">{{item.memberName}}</view>
						<view class="main-td my-pdr-10">{{item.deviceNo}}</view>
					</view>
				</template>
				<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
			</scroll-view>
		</view>
		<view class="btn_box my-mgt-10">
			<button class="btn_box_left" @click="bindBatch">批量划拨</button>
			<button class="btn_box_right" @click="choseBind">选择划拨</button>
		</view>
		<u-popup v-model="batch" mode="center" border-radius="20">
			<view class="batch_box my-pdlr-15">
				<view class="batch_box_tlt">批量划拨</view>
				<view class="batch_box_inp">
					<view class="batch_box_inp_name">划拨账户</view>
					<input type="text" v-model="phone" @blur="seachData" class="inp my-pdl-15"  placeholder-class="inp_pla"  placeholder="输入手机号精确查找"/>
				</view>
				<view class="sech_contant my-mgt-20">
					<view class="name">{{memberName||''}}</view>
					<view class="num">{{seachphone ||''}}</view>
				</view>
				<view class="batch_box_inp">
					<view class="batch_box_inp_name">机具前缀</view>
					<input type="text" v-model="preDeviceNo" class="inp my-pdl-15" placeholder-class="inp_pla"  placeholder="请输入机具前缀"/>
				</view>
				<view class="batch_box_inp">
					<view class="batch_box_inp_name">开始SN码</view>
					<input type="text" v-model="statSN" class="inp my-pdl-15" placeholder-class="inp_pla"  placeholder="输入开始终端SN"/>
				</view>
				<view class="batch_box_inp">
					<view class="batch_box_inp_name">结束SN码</view>
					<input type="text" v-model="endSN" class="inp my-pdl-15" placeholder-class="inp_pla"  placeholder="输入结束终端SN"/>
				</view>
				<view class="batch_txt my-mgt-10">
					注：操作请谨慎，划拨后此段序列号就没有管理权限。
					只能操作未激活的系列号。
				</view>
				<view class="batch_box_btn my-mgt-15">
					<button class="btn" @click="distribute">确认划拨</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="choose" mode="center" border-radius="20">
			<view class="batch_box my-pdlr-15">
				<view class="batch_box_tlt">选择划拨</view>
				<view class="batch_box_inp my-mgt-15">
					<view class="batch_box_inp_name">划拨账户</view>
					<input type="text" v-model.lazy="phone" class="chose_inp my-pdl-15" placeholder-class="inp_pla"  placeholder="输入手机号精确查找"/>
					<view class="seach_box" @click="doseach">搜索</view>
				</view>
				<view class="sech_contant my-mgt-20">
					<view class="name">{{memberName||''}}</view>
					<view class="num">{{seachphone ||''}}</view>
				</view>
				<view class="batch_txt my-mgt-15">
					注：操作请谨慎，划拨后此段序列号就没有管理权限。
					只能操作未激活的系列号。
				</view>
				<view class="batch_box_btn my-mgt-20">
					<button class="btn" @click="ConfirmTransfer">确认划拨</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import{ manageListApi ,distributeApi ,terminalApi,distributebatchApi} from "@/api/home.js"
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				deviceNo:'',
				tab:['全部','已激活','未激活'],
				select:0,
				checkAll:false,
				dev:[],
				total:1,
				pageIndex:0,
				pageSize:30,
				batch:false,//批量划拨控制器
				choose:false,//选择划拨控制器
				brandId:1,
				brandName:'',
				activationStatus:null,
				phone:null,
				memberId:null,
				memberName:'',
				seachphone:'',
				deviceIds:[],
				curr:false,
				statSN:null,
				endSN:null,
				preDeviceNo:null,
			};
		},
		onLoad(options) {
			this.brandId = Number(options.brandId)
			this.brandName = options.brandName
			this.getList()
		},
		methods:{
			// 批量划拨
			async distribute(){
				let _this = this
				if(this.memberId===null&&this.statSN===null&&this.endSN===null){
					uni.showToast({
						title: '请选择要划拨的账户',
						icon: 'none'
					})
					return
				}
				let params = {
					startDeviceNo:this.statSN,
					endDeviceNo:this.endSN,
					memberId:this.memberId,
					brandId:this.brandId,
					preDeviceNo:this.preDeviceNo
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await distributebatchApi(params)
				if(res.statusCode ===200){
					uni.hideLoading()
					uni.showToast({
						title: '划拨成功！',
						icon: 'success',
						success() {
							setTimeout(()=>{
								_this.batch = false
								_this.refish()
							},1000)
						}
					})
				}
			},
			// 选择划拨
			async ConfirmTransfer(){
				let _this = this
				if(this.memberId===null){
					uni.showToast({
						title: '请选择要划拨的账户',
						icon: 'none'
					})
					return
				}
				let params = {
					deviceIds:this.deviceIds,
					memberId:this.memberId
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await terminalApi(params)
				if(res.statusCode ===200){
					uni.hideLoading()
					uni.showToast({
						title: '划拨成功！',
						icon: 'success',
						success() {
							setTimeout(()=>{
								_this.choose = false
								_this.refish()
							},1000)
						}
					})
				}
			},
			async doseach(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await distributeApi(this.phone)
				if(res.statusCode ===200){
					uni.hideLoading()
					this.memberId = res.data.data.memberId
					this.memberName = res.data.data.memberName
					this.seachphone = res.data.data.phone
				}
			},
			seachData(){
				this.memberId = null
				this.memberName = ''
				this.seachphone = ''
				this.doseach()
			},
			async getList(){
				if(this.dev.length >= this.total) return 
				let params = {
					activationStatus:this.activationStatus,
					brandId:this.brandId,
					pageIndex:this.pageIndex,
					pageSize:this.pageSize
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await manageListApi(params)
				if(res.statusCode===200){
					uni.hideLoading()
					this.dev = [...this.dev,...res.data.data.rows]
					this.total = res.data.data.total
					this.pageIndex++
				}
			},
			refish(){
				this.dev = []
				this.total = 1
				this.pageIndex = 0
				this.getList()
			},
			previous(){
				uni.navigateBack({
					delta:1
				})
			},
			onTab(e) {
				this.select = e
				if(e===0){
					this.activationStatus = ''
					this.refish()
				}else if(e===1){
					this.activationStatus = true
					this.refish()
				}else{
					this.activationStatus = false
					this.refish()
				}
			},
			// 全选
			allCheckBox(e){
				let value = e.detail.value
				this.dev.forEach(item => {
					item.check = (value.length > 0)
					this.$set(item, 'checked', item.check)
				})
			},
			// 勾选取反
			changeInfo(index) {
				this.dev[index].check = !this.dev[index].check
			},
			// 批量选择控制
			bindBatch(){
				this.batch = true
			},
			// 选择划拨控制
			choseBind(){
				if(this.curr){
					this.deviceIds=[]
				}
				this.dev.forEach(item => {
					if (item.check&&item.activation===false) {
						this.deviceIds.push(item.deviceId);
						this.curr = true
					}
				})
				if(this.deviceIds.length !==0){
					this.choose = true
				}else{
					uni.showToast({
						title: '请选择设备',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tarnser {
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
		.search-bar {
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			.input {
				width: 690rpx;
				height: 68rpx;
				margin: auto;
				background: #FAFAFA;
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				.txt_inp{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
				.i-icon {
					width: 26rpx;
					height: 26rpx;
				}
				.scang_img{
					width: 40rpx;
					height: 40rpx;
				}

				.device {
					width: 80%;
					height: 100%;
				}
			}
			.tabs {
				width: 100%;
				height: 100rpx;	
				.swiper-item {
					width: 250rpx !important;
					display: flex;
					flex-direction: column;
					align-items: center;
					.swiper-box {
						width: 100%;
						height: 80%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.active_bor{
						width: 60rpx;
						height: 3rpx;
						background: #F05329;
						border-radius: 2rpx;
					}
				}
			}
		}
		.selection{
			width: 690rpx;
			height: 65%;
			margin: auto;
			overflow: hidden;
			background: #FFFFFF;
			border-radius: 20rpx;
			.select-all {
				width: 100%;
				height: 10%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-bottom: 2rpx solid #f8f8f8;
						
				.sel {
					width: 40%;
					height: 100%;
					.check {
						transform: scale(0.8, 0.8);
						margin-right: 10rpx;
					}
				}
			}
			.scroll {
				width: 100%;
				height: 90%;
				overflow: hidden;
				border-radius: 0 0 10rpx 10rpx;
				.scroll_box{
					border-bottom: 2rpx solid #f8f8f8;
					.trs_check{
						transform: scale(0.8, 0.8);
					}
				}
			}
		}
		.btn_box{
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			.btn_box_left,.btn_box_right{
				width: 330rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			.btn_box_left{
				background: #FBCCBF;
				color: #F05329;
			}
			.btn_box_right{
				background: #F05329;
				color: #FFFEFE;
			}
		}
		.batch_box{
			width: 640rpx;
			height: 950rpx;
			background: #FFFFFF;
			.batch_box_tlt{
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
			.batch_box_inp{
				width: 100%;
				height: 110rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #000000;
				.batch_box_inp_name{
					width: 150rpx;
					height: 100%;
					line-height: 110rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.inp{
					width: 430rpx;
					height: 100%;
					line-height: 110rpx;
				}
				.inp_pla{
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}
				.chose_inp{
					width: 300rpx;
					height: 100%;
				}
				.seach_box{
					width: 100rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background: #F05329;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FEFEFE;
				}
			}
			.sech_contant{
				width: 100%;
				height: 100rpx;
				background: #FAFAFA;
				display: flex;
				align-items: center;
				.name{
					width: 20%;
					height: 100%;
					line-height: 100rpx;
					text-align: center;
				}
				.num{
					width: 70%;
					height: 100%;
					line-height: 100rpx;
					text-align: center;
				}
			}
			.batch_txt{
				width: 100%;
				height: 110rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #F05329;
			}
			.batch_box_btn{
				width: 100%;
				height: 70rpx;
				.btn{
					width: 350rpx;
					height: 70rpx;
					margin: auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FEFEFE;
				}
			}
		}
	}
</style>
